<template>
  <div class="all">
    <div class="oneDiv" draggable="true" @dragstart="dragstart($event, item)" @dragend="dragend" v-for="(item, index) in dragList" :key="index">
      {{ item.name }}
    </div>
    <div class="drag" @drop="drop" @dragover.prevent>
      <div :class="['box', item.selectName]" @mousedown="move($event, item)" @click="getModel(item)" v-for="(item, index) in dropData" :key="index" :style="{ left: item.left + 'px', top: item.top + 'px' }">
        {{ item.name }}
        {{ item.model }}
      </div>
    </div>
    <div class="set">
      <span v-for="(value, key, index) in currentItem" :key="value.type" style="margin-right: 20px">{{ key }}:{{ value }}索引({{ index }})</span>
      <el-input v-model="curretnInput" placeholder="" @change="setModel"></el-input>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      positionX: 0,
      positionY: 0,
      dropData: [],
      currentLeft: 50,
      currentTop: 50,
      dragList: [
        { name: 'DIV', width: 50, height: 50, left: 0, top: 0, type: 1, model: '111' },
        { name: '数字', width: 50, height: 50, left: 0, top: 0, type: 2, model: '' },
        { name: '日期', width: 50, height: 50, left: 0, top: 0, type: 3, model: '' },
        { name: '签署区', width: 50, height: 50, left: 0, top: 0, type: 4, model: '' }
      ],
      curretnInput: '',
      currentItem: {},
      currentName: ''
    }
  },
  computed: {
  },
  methods: {
    move (e, item) {
      const odiv = e.target
      // 算出鼠标相对元素的位置
      const disX = e.clientX - odiv.offsetLeft
      const disY = e.clientY - odiv.offsetTop
      document.onmousemove = e => {
        let left = e.clientX - disX
        let top = e.clientY - disY
        // 设置边距
        if (top <= 0) {
          top = 0
        }
        if (top >= 500 - 50) {
          top = 500 - 50
        }
        if (left >= 1000 - 50) {
          left = 1000 - 50
        }
        if (left <= 0) {
          left = 0
        }
        item.left = left
        item.top = top
        // odiv.style.left = left + 'px'
        // odiv.style.top = top + 'px'
        // this.positionX = top
        // this.positionY = left
      }
      document.onmouseup = e => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    dragstart (e, item) {
      // 将拖拽对象的参数传递给拖拽存放地
      e.dataTransfer.setData('item', JSON.stringify(item))
    },
    dragend (e) {
      // 清楚
      e.dataTransfer.clearData()
    },
    drop (e) {
      console.log(e)
      // 获取拖拽对象的参数
      let data = e.dataTransfer.getData('item')
      data = JSON.parse(data)
      // 鼠标落点位置相对于当前拖拽存放地的 x y
      data.left = e.layerX
      data.top = e.layerY
      // 存放到当前拖拽对象生成的列表中
      this.dropData.push(data)
      console.log(this.dropData)
    },
    getModel (item) {
      this.dropData = this.dropData.map(item => {
        item.selectName = ''
        return item
      })
      console.log(this.dragList)
      item.selectName = 'select'
      this.curretnInput = item.model
      this.currentItem = item
    },
    setModel () {
      this.currentItem.model = this.curretnInput
    }
  }
}
</script>

<style lang="less" scoped>
.all {
  overflow: hidden;
}
.drag {
  overflow: hidden;
  width: 1000px;
  height: 500px;
  background: skyblue;
  margin: 50px auto;
  position: relative;
  .box {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    background: greenyellow;
    user-select: none;
    cursor: pointer;
  }
  .select {
    background: white;
  }
}
.oneDiv {
  width: 150px;
  height: 30px;
  text-align: center;
  // margin: 50px;
  float: left;
  margin: 0 20px;
  border: 1px solid;
  line-height: 30px;
  cursor: pointer;
}
.numberInput {
  width: 50px;
  height: 50px;
}
</style>
